<template>
  <div>
    <el-dialog
    title="地图预览"
    width="70%"
    :close-on-click-modal="false"
    :append-to-body="true"
    :visible.sync="visible">
    <div :id="mapId" style="height: 400px; margin: -30px -20px;">
    </div>
    <span slot="footer" class="dialog-footer">
      <span style="margin-right: 30px; color: #333333;" v-if="coordText != ''">
        {{coordText}}
        <span style="color: #0000ff;" @click="copy()">复制</span>
      </span>
      <el-button @click="visible = false">关闭</el-button>
      <el-button type="primary" @click="doSubmit()">确定</el-button>
    </span>
  </el-dialog>
  </div>
</template>

<script>
  import * as HMAP from './hmap.manage.js'
  export default {
    data () {
      return {
        visible: false,
        mapId: 'mappreview_' + Math.random().toString(36).substr(2),
        mapManager: null,
        coordText: ''
      }
    },
    props: {
    },
    watch: {
    },
    beforeDestroy () {
      if (this.mapManager) {
        console.log("preview:执行了销毁")
        this.mapManager.destroy()
        this.mapManager = null
      }
    },
    created() {
      console.log("preview:created")
    },
    methods: {
      init (mapUrl, buildingData) {
        this.visible = true
        this.coordText = ''
        this.$nextTick(() => {
          if (!this.mapManager) {
            this.mapManager = new HMAP.Hmap(this.mapId, {
            	mapStorage: true, 						      // 使用地图缓存功能，加快加载速度
            	viewMode: HMAP.ViewMode.Mode_3D, 	  // 初始二维还是三维状态,默认是3D状态
              maxDistance: 2000000,               // 摄像头最远距离
            });
            this.mapManager.showAxes();
            this.mapManager.on('onMapClick', (e) => {
              var pos = {
                x: this.toFixed(e.position.x),
                y: this.toFixed(e.position.y),
                z: this.toFixed(e.position.z)
              }
              this.coordText = JSON.stringify(pos)
            })
          }
          this.showFloor(mapUrl, buildingData)
        })
      },
      copy() {
        navigator.clipboard.writeText(this.coordText)
        this.$message("复制成功")
      },
      showFloor(mapUrl, buildingData) {
        if( !mapUrl || mapUrl === "" ) {
          this.mapManager.showFloors([]);
          return;
        }
        this.mapManager.addFloor({
        	floorId: mapUrl,  				// 必须：楼层Id
        	floorName: 'L1',					// 必须：楼层名称
        	floorHeight: 0,						// 必须: 楼层展示的z坐标
        	floorMap: mapUrl,							// 必须: 地图文件
        	buildingName: '',					// 必须: 所属楼宇
          longitude: buildingData.longitude,
          latitude: buildingData.latitude
        })
        this.mapManager.showFloors([mapUrl]);
        this.mapManager.spreadMap({
        	spreadRatio: 0, 									// 伸缩倍数
        	duration: 0.3,											// 动画秒数
        	rotateAngle: 0,	// 地图旋转角度
        	tiltAngle: 89,										// 地图到xy面的角度
        	distance: 10000,									// 摄像头距离中心点距离
        	targetX: 0,									   		// 目标点X轴
        	targetY: 0,									   		// 目标点Y轴
        	targetZ: 0									   		// 目标点Z轴
        })
        this.mapManager.resize();
      },
      doSubmit () {
        this.visible = false
      }
    }
  }
</script>
